<!-- 页面外套 -->
<div class="page-wrapper" id="personnel_train_result">
    
    <!-- 数据网格 -->
    <div class="datagrid datagrid-striped" id="personnel_train_result_datagrid">

        <!-- 工具条组 -->
        <div class="tool-group">
            <div class="tool-search">
                <div class="im-label">
                    <div class="input-group">
                        <select class="form-control" id="personnel_train_result_tool_keys">
                            <option value="1">姓名</option>
                            <option value="2">工号</option>
                            <option value="3">部门</option>
                        </select>
                        <span class="input-group-addon fix-border fix-padding"></span>
                        <input type="text" class="form-control" id="personnel_train_result_tool_search">
                    </div>
                </div>
                <label>
                    <span>考试类型：</span>
                    <select class="form-control" id="personnel_train_result_tool_select1"><!--JS推进--></select>
                </label>
                <label>
                    <span>状态：</span>
                    <select class="form-control" id="personnel_train_result_tool_select2"><!--JS推进--></select>
                </label>
                <label><button class="btn btn-primary" id="personnel_train_result_search_btn"><i class="icon icon-search"></i> 搜索</button></label>
            </div>
        </div>
        <!-- tool-group -->

        <div class="datagrid-container"></div>
        <ul class="pager btn-mini" data-elements="prev,pages,next"></ul>
    </div>
    <!-- datagrid -->

    <!-- 添加盒子 -->
    <div class="modal modal-for-page fade" aria-hidden="false" id="personnel_train_result_show_box">
        <div class="modal-dialog modal-fullscreen">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">关闭</span></button>
                    <h4 class="modal-title">查看</h4>
                </div>
                <div class="modal-body">
                    <div class="container"> <!-- JS推进 --></div>
                </div>
            </div>
        </div>
    </div>
    <!-- personnel_train_result_show_box -->

</div>
<!-- page-wrapper -->

<script>
$(function(){

    //变量声明-----------------------------------------------------------------------------------------------
    var
    personnel_train_result                    = $("#personnel_train_result"),                     //页面ID
    personnel_train_result_datagrid           = $("#personnel_train_result_datagrid"),            //数据表格
    //搜索
    personnel_train_result_tool_keys          = $("#personnel_train_result_tool_keys"),           //搜索类别
    personnel_train_result_tool_search        = $("#personnel_train_result_tool_search"),         //搜索字段
    personnel_train_result_tool_select1       = $("#personnel_train_result_tool_select1"),        //下拉选择1
    personnel_train_result_tool_select2       = $("#personnel_train_result_tool_select2"),        //下拉选择2
    personnel_train_result_tool_date1         = $("#personnel_train_result_tool_date1"),          //开始时间
    personnel_train_result_tool_date2         = $("#personnel_train_result_tool_date2"),          //结束时间   
    personnel_train_result_search_btn         = $("#personnel_train_result_search_btn"),          //搜索按钮
    //查看
    personnel_train_result_show_box           = $("#personnel_train_result_show_box");            //查看盒子

    //接口对象-----------------------------------------------------------------------------------------------
    if( window.STATE == "local" ){

        //本地接口
        var personnel_train_result_api = {
            datagrid  : LOCAL + "Test/Personnel/Train/result.json",                               //数据表格
            show      : LOCAL + "Test/Personnel/Train/result_show.json",                          //数据表格
            select    : LOCAL + "Test/test_select.json",                                          //下拉选择
        }

    } else if ( window.STATE == "route" ){

        //远程接口
        var personnel_train_result_api = {
            datagrid  : LOCAL + "Test/Personnel/Train/result.json",                               //数据表格
            show      : LOCAL + "Test/Personnel/Train/result_show.json",                          //数据表格
            select    : LOCAL + "Test/test_select.json",                                          //下拉选择
        }

    }
 
    //数据表格-----------------------------------------------------------------------------------------------
    personnel_train_result_datagrid.datagrid({
        height      : zui_datagrid_height(personnel_train_result_datagrid),
        sortable    : false,
        cache       : false,
        showRowIndex: true,
        configs     : {
            R0:{className:"text-center"},
            C1:{className:"cell-hidden"}
        },
        states      : {
            fixedLeftUntil  : 3,
            pager           : {
                page        : 1,
                recPerPage  : window.REC_PER_PAGE,
            }
        },
        dataSource : {
            cols   : [
                {width:49,  name:"id",        label:"ID"      },
                {width:80, name:"user",       label:"姓名"    },
                {width:80, name:"numb",       label:"工号"    },
                {width:80, name:"depart",     label:"部门"    },
                {width:80, name:"post",       label:"职位"    },
                {width:120,name:"type",       label:"考试类型"},
                {width:250,name:"subject",    label:"考试题目"},
                {width:250,name:"examtime",   label:"考试时间"},                
                {width:80, name:"duration",   label:"考试时长"},
                {width:80, name:"result",     label:"考试成绩"},
                {width:80, name:"state",      label:"状态"    },
                {width:80, name:"operate",    label:"操作",html:true,
                    valueOperator : {
                        getter : function(dataValue,cell,dataGrid){
                            return `<a rowIndex="${cell.rowIndex}" class="personnel_train_result_show_btn">查看</a>`;
                        }
                    }
                },
            ],
            remote : function(){
                return {
                    url     : personnel_train_result_api.datagrid,
                    type    : "POST",
                    dataType: "json",
                }
            }
        }
    });//datagrid()
    
    //变量声明-----------------------------------------------------------------------------------------------
    var 
    personnel_train_result_datagrid_obj    = personnel_train_result_datagrid.data("zui.datagrid"),//表格对象
    personnel_train_result_show_btn        = ".personnel_train_result_show_btn";                  //查看按钮

    //下拉选项-----------------------------------------------------------------------------------------------
    //考试类型
    $.ajax({
        url     : personnel_train_result_api.select,
        type    : "post",
        dataType: "json",
        data    : {},
        success : function(data){
            if( data.status>0 ){
                var data = data.data;
                var option = "<option value='0'>全部</option>";
                for(var i=0;i<data.length;i++){
                    option += "<option value='"+data[i].id+"'>"+data[i].name+"</option>"
                }
                personnel_train_result_tool_select1.html(option);
            }
        }
    });

    //状态
    $.ajax({
        url     : personnel_train_result_api.select,
        type    : "post",
        dataType: "json",
        data    : {},
        success : function(data){
            if( data.status>0 ){
                var data = data.data;
                var option = "<option value='0'>全部</option>";
                for(var i=0;i<data.length;i++){
                    option += "<option value='"+data[i].id+"'>"+data[i].name+"</option>"
                }
                personnel_train_result_tool_select2.html(option);
            }
        }
    });

    //搜索按钮-----------------------------------------------------------------------------------------------
    personnel_train_result_search_btn.click(function(){

        //字段整理
        var keyword
        = "?sid=" + personnel_train_result_tool_keys.val()
        + "&search=" + personnel_train_result_tool_search.val()
        + "&select1="+ personnel_train_result_tool_select1.val()
        + "&select2="+ personnel_train_result_tool_select2.val();

        //GET提交
        zui_datagrid_render(personnel_train_result_datagrid_obj,personnel_train_result_api.datagrid+keyword);

    });

    //查看按钮-----------------------------------------------------------------------------------------------
    $(document).on("click",personnel_train_result_show_btn,function(){

        //数据ID
        var data_id  = zui_datagrid_get_id($(this).attr("rowIndex"));

        //远程提交
        $.ajax({
            url  : personnel_train_result_api.show,
            type : "post",
            data : { id:data_id },
            success : function(data){

                if( data.status>0 ){
                    //模板生成
                    var temp = `
                        <blockquote>试卷信息</blockquote>
                        <table class="table table-bordered">
                            <tr><td style="width:70px;">姓名</td><td>${data.user}</td></tr>
                            <tr><td>部门    </td><td>${data.depart}</td></tr>
                            <tr><td>职位    </td><td>${data.post}</td></tr>
                            <tr><td>分数    </td><td>${data.score}</td></tr>
                            <tr><td>考试时间</td><td>${data.examtime}</td></tr>
                            <tr><td>考试时长</td><td>${data.duration}</td></tr>
                        <table>
                        <blockquote>试卷详情</blockquote>
                        <table class="table table-bordered" id="personnel_train_result_show_table2">
                            <thead>
                                <tr>
                                    <th style="width:45px;">序号</th>
                                    <th>试题</th>
                                    <th style="width:70px;">正确答案</th>
                                    <th style="width:70px;">您的答案</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    `;
                     personnel_train_result_show_box.find(".container").html(temp);

                    //表格生成
                    var tr = "";
                    for( var i=0;i<data.list.length;i++ ){
                        tr+= `
                            <tr>
                                <td>${Object.values(data.list[i])[0]}</td>
                                <td>
                                    <dl>
                                        <dt>${Object.values(data.list[i])[1]}</dt>
                                        <dd>A.${Object.values(data.list[i])[2]}</dd>
                                        <dd>B.${Object.values(data.list[i])[3]}</dd>
                                        <dd>C.${Object.values(data.list[i])[4]}</dd>
                                        <dd>D.${Object.values(data.list[i])[5]}</dd>
                                    </dl>
                                </td>
                                <td>${Object.values(data.list[i])[6]}</td>
                                <td></td>
                            </tr>
                        `;
                    }
                    personnel_train_result_show_box.find("#personnel_train_result_show_table2 tbody").html(tr);

                    //答案处理
                    var your_answer = "";
                    for( var j=0;j<data.list.length;j++ ){
                        if( Object.values(data.list[j])[6] ==Object.values(data.list[j])[7] ){ your_answer='<span class="text-success">'+ Object.values(data.list[j])[7] +'</span>'; }
                        if( Object.values(data.list[j])[6]!==Object.values(data.list[j])[7] ){ your_answer='<span class="text-danger">' + Object.values(data.list[j])[7] +'</span>'; }
                        personnel_train_result_show_box.find("#personnel_train_result_show_table2 tbody tr").eq(j).find("td:last-child").html(your_answer);
                    }

                    //面板显示
                    personnel_train_result_show_box.modal("show");

                } else {
                    um_tip(data.message,"1000","text-danger");
                }
                
            }
        });

    });

});//预加载结尾
</script>